import React, { useState, useMemo } from "react";
import { Tabs, Popup, Badge } from "antd-mobile";
import { locationShape, historyShape, storeShape } from "src/propType";
import TaskList from "../taskList";

const MenuBar = props => {
    const [activityKey, setActivityKey] = useState("");
    const [visible, setVisible] = useState(false);
    const [count, setCount] = useState("");

    const { store, history, location } = props;

    const changeTab = activityKey => {
        if (["/SignTask", "/message"].includes(activityKey)) {
            history.push(activityKey);
            return;
        }
        setActivityKey(activityKey);
        setVisible(visible => !visible);
    };

    const getTabs = useMemo(() => {
        let allMenus = [...store.user.menuList];
        allMenus.unshift({
            treeName: "待办",
            jspath: "/message",
        });
        return allMenus.filter(
            tab => !["/Homeforrails", "/SysConfig", "/SealTask"].includes(tab.jspath),
        );
    }, [store.user.menuList]);

    const activeTab = useMemo(() => {
        return getTabs.find(tab => tab.jspath === activityKey);
    }, [activityKey]);

    return (
        <div className="menu-bar">
            <Tabs
                activeKey={activityKey}
                onChange={changeTab}
                style={{
                    "--active-title-color": "#d72b3e",
                    "--active-line-color": "none",
                    fontWeight: 600,
                }}
            >
                {getTabs.map(tab => {
                    const title =
                        tab.jspath === "/message" ? (
                            <Badge content={count} style={{ "--right": "-10px", "--top": "8px" }}>
                                {tab.treeName}
                            </Badge>
                        ) : (
                            tab.treeName
                        );
                    return <Tabs.Tab title={title} key={tab.jspath} />;
                })}
            </Tabs>
            <div style={{ position: "absolute", left: "-9999px" }}>
                <TaskList store={store} setCount={setCount} />
            </div>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false);
                    setActivityKey("");
                }}
                onClose={() => {
                    setVisible(false);
                    setActivityKey("");
                }}
                bodyStyle={{ height: "60vh" }}
                getContainer={null}
                showCloseButton={true}
                className="home-pop"
            >
                <h2 className="title">{activeTab?.treeName}</h2>
                <div className="list">
                    {activeTab?.data?.map(table => {
                        const active = location.pathname === table.jspath;
                        return (
                            <div
                                className={`list-item ${active ? "active-color" : ""}`}
                                key={table.id}
                                onClick={() => {
                                    if (active) return;
                                    table.jspath && history.push(table.jspath);
                                }}
                            >
                                {table.treeName}
                            </div>
                        );
                    })}
                </div>
            </Popup>
        </div>
    );
};

MenuBar.propTypes = {
    history: historyShape,
    store: storeShape,
    location: locationShape,
};

export default MenuBar;
